//工具类
@function r($px) {
    @return $px/$fs*1rem
}

$fs:170.66px;
$bg :#f3f4f6;
$value-fontColor:#666666;
$moren-fontColor:#d6d6d6;
$borderColor:#e1e2e4;
//大号红色按钮------------------------------------------------------------------
.red-btn {
    color: white;
    background: #cc3333;
    font-size: r(35px);
    border-radius: r(5px);
    text-align: center;
    line-height: r(80px);
    letter-spacing: r(5px);
    width: r(560px);
    height: r(80px);
    margin: 0 auto;
    &:active {
        background: #921e1e;
    }
}

//白条-------------------------------------------------------------------------
.white-bar-item {
    position: relative;
    font-size: r(26px);
    width: r(640px);
    height: r(94px);
    background: white;
    padding: r(30px) r(29px);
    border-bottom: 1px solid $borderColor;
    .white-bar-input {
        position: absolute;
        left: r(216px);
        bottom: r(30px);
        width: r(394px);
        outline: none;
    }
}

//非输入框白条----------------------------------------------------------------
.white-bar {
    position: relative;
    font-size: r(26px);
    width: r(640px);
    height: r(94px);
    background: white;
    padding: r(30px) r(29px);
    border-bottom: 1px solid $borderColor;
    .choose {
        width: r(195px);
        height: r(94px);
        position: absolute;
        right: r(29px);
        bottom: r(0px);
        >p {
            position: absolute;
            right: r(31px);
            bottom: r(30px);
        }
        >img {
            position: absolute;
            right: r(0px);
            bottom: r(30px);
            width: r(16px);
            height: r(28px);
        }
    }
}

//白条按钮---------------------------------------------------------------------
.white-bar-btn {
    text-align: center;
    font-size: r(26px);
    width: r(640px);
    height: r(107px);
    background: white;
    padding: r(30px) r(29px);
    border-bottom: 1px solid $borderColor;
}

.have-value {
    color: $value-fontColor;
}

.null-value {
    color: $moren-fontColor;
}

//标题栏---------------------------------------------------------------------
.head-bar {
    position: relative;
    font-size: r(0px);
    width: r(640px);
    height: r(87px);
    
    >p {
        text-align: center;
        position: absolute;
        font-size: r(35px);
        width: r(485px);
        height: r(40px);
        line-height: r(40px);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        letter-spacing: r(3px);
    }
    .back-img{
        position: absolute;
        width: r(44px);
        height: r(70px);
        bottom: r(10px);
        left: r(15px);
        padding-top: r(15px);
        padding-left: r(15px);
    }
    img {

        width: r(22px);
        height: r(37px);
    }
}

//背景遮罩--------------------------------------------------------------------------
.mask {
    width: 100%;
    height: r(1136px);
    background: rgba(0, 0, 0, .5);
    position: absolute;
    top: 0;
    left: 0; 
    display: none;
}

//确认框----------------------------------------------------------------------------
.confirm-box {
    transform: scale(0,0);
    width: r(540px);
    height: r(305px);
    background: #f8f8f8;
    position: absolute;
    left: r(640px)/2 - r(270px);
    top: 30%;
    border-radius: r(18px);
    
    padding: r(23px) r(25px);
    .confirm-btn{
        display: flex;
        margin-top: r(50px);
        justify-content: space-between;
        .btn{
            width: r(237px);
            height: r(78px);
            border-radius: r(5px);
            font-size: r(28px);
            border: r(1px) #b7b7b7 solid;
            text-align: center;
            line-height: r(78px);
         }
         .cancel{
            background:#ffffff;
            color: $value-fontColor;
            &:active{
                background: #e5e4e4;
            }
            
         }
         .confirm{
            background: #cc3333;
            color: white;
            &:active {
                background: #921e1e;
            }
         }
    }
}

//消息框--------------------------------------------------------------------
.msg-box{
    width: r(249px);
    height: r(183px);
    background: rgba(0, 0, 0, .7);
    color: white;
    text-align: center;
    position: absolute;
    left: r(640px)/2 - r(125px);
    top: 30%;
    border-radius: r(18px);
    font-size: 0;
    padding: r(30px);
    display: none;
    .msg-img{
        margin-bottom: r(15px);
        img{
            width: r(69px);
            height: r(69px);
        }
    }
    >p{
        font-size: r(28px);
    }
}

//登录注册模块标题栏--------------------------------------------------------
.login-head-bar {
    position: relative;
    font-size: r(0px);
    width: r(640px);
    height: r(87px);
    border-bottom: 1px solid $borderColor;
    .back-btn{
        position: absolute;
        font-size: r(30px);
        color: $value-fontColor;
        top: r(27px);
        left: r(20px);
    }
    .title{
        text-align: center;
        font-size: r(35px);
        position: absolute;
        width: r(320px);
        height: r(45px);
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);

    }
}

//文本输入框----------------------------------------------------------------------
.input-text{
    width: r(580px);
    height: r(85px);
    position: absolute;
    left: r(640px)/2 - r(580px)/2;
    display: flex;
    background: white;
    border-bottom: 1px solid $borderColor;
    >p{
        width: r(86px);
        height: r(85px);
        text-align: center;
        line-height: r(85px);
        color: $value-fontColor;
        font-size: r(28px);
    }
    >input{
        width: r(430px);
        height: r(83px);
        line-height: r(85px);
        font-size:r(32px);
        outline: none;
        border: none;
        padding-left: r(14px);
        
    }
}

//验证码输入框-----------------------------------------------------------------------
.input-yzm{
    width: r(345px);
    height: r(85px);
    display: flex;
    background: white;
    border: 1px solid $borderColor;
    >p{
        width: r(137px);
        height: r(85px);
        text-align: center;
        line-height: r(85px);
        color: $value-fontColor;
        font-size: r(28px);
    }
    >input{
        width: r(208px);
        height: r(80px);
        line-height: r(85px);
        font-size:r(28px);
        outline: none;
        border: none;
        padding-left: r(14px);
        
    }
    
}

.yzm{
    width: r(580px);
    height: r(85px);
    position: absolute;
    left: r(640px)/2 - r(580px)/2;
    font-size: 0;
    display: flex;
    justify-content: space-between;
    margin-top: r(30px);
    .yzm-btn{
        width: r(198px);
        height: r(85px);
        border: 1px solid $borderColor;
        text-align: center;
        font-size: r(28px);
        line-height: r(85px);
        background: white;
        color: $value-fontColor;
        &:active{
            background: #dedede;
        }
        span{
            color: red;
        }
    }
}

//动画库-----------------------------------------------------------------------------
//确认框弹出和关闭
@keyframes confirm-open {
    0% {
        transform: scale(0, 0);
    }
    50% {
        transform: scale(1.2, 1.2);
    }
    100% {
        transform: scale(1, 1);
    }
}

@keyframes confirm-close {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.2, 1.2);
    }
    100% {
        transform: scale(0, 0);
    }
}

.confirm-open {
    animation: confirm-open 0.5s;
    animation-fill-mode: forwards;
}
.confirm-close{
    animation: confirm-close 0.5s;
    animation-fill-mode: forwards;
}